<template>
	<view class="main">
		<text class="shop_title" v-if="item.title" :style="{'margin-bottom':item.long_title?'0rpx':'20rpx'}">{{item.title}}</text>
		<text class="long_title" v-if="item.long_title">{{item.long_title}}</text>
		<slot v-if="item.slot"></slot>
		<view class="upload_photo_list">
			<view :class="item.field=='long_chunk'?'fileList_warp':''">
				<view class="img_relative">
					<u-upload :fileList="fileList1" @afterRead="afterRead" name="1" @delete="deletePic" multiple
						:maxCount="item.maxCount" :width="item.width" :height="item.height" accept="image" >
						<image :src="`${$http_cos}/static/%E5%A2%9E%E5%8A%A0%E7%85%A7%E7%89%87%E6%95%B4%E4%BD%93.png`"
							mode="widthFix" style="width: 202rpx;height:202rpx;" v-if="item.field=='chunk'"  :style="{'margin-left':fileList1.length==1?'22rpx':''}"></image>
						<view class="card_imgs" v-if="item.field=='long_chunk'">
							<image :src="`${$http_cos}/static/card_img.png`" mode="aspectFit"
								style="width: 622rpx;height:340rpx;">
							</image>
						</view>
					</u-upload>
					<text v-if="item.field=='long_chunk'">证照仅用于蔡阿姨身份认证，他用无效</text>
				</view>
				<view class="tip" v-if="item.tip!=''">
					<text>{{item.tip}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import COS from 'cos-js-sdk-v5';
	import cos from '@/common/cos.js'
	// const fs = require('fs');
	const app = getApp();
	export default {
		data() {
			return {
				item: this.config,
				$http_cos: app.$http_cos,
			}
		},
		props: {
			value: {
				type: String,
				default: () => {}
			},
			config: {
				type: Object,
				default: () => {}
			},
			is_audit: {
				type: String,
				default: () => {}
			}
		},
		computed: {
			fileList1: {
				get() {
					if (JSON.parse(this.value).length == 0) {
						return JSON.parse(this.value)
					}
					let list = JSON.parse(this.value).map(item => {
						if (item.message == '') {
							return {
								url: item.url + '?imageView2/1/w/750/q/85'
							}
						}
						return item
					})
					return list
				},
				set(value) {
					this.$emit('input', JSON.stringify(value))
				}
			},

		},
		watch: {

		},
		methods: {
			// 新增图片
			// 新增图片
			async afterRead(event) {				console.log(event)				let fileList = this.fileList1				// console.log(fileList)				let lists = [].concat(event.file)				let arr = []				let fileListLen = this.fileList1.length				let Images = [];				console.log(lists)				// 遍历上传的每张图片				for (let i = 0; i < lists.length; i++) {										const item = lists[i];					console.log(item)					// 验证图片格式					const isImage = /\.(png|jpe?g)$/i.test(item.name);					if (!isImage) {						uni.showToast({							title: '只能上传png，jpg，jpeg格式的图片',							icon: 'none',							duration: 3000						});						lists.splice(i, 1);						continue;					}					// 验证图片大小					const maxSize = 2 * 1024 * 1024; // 2MB大小限制					if (item.size > maxSize) {						uni.showToast({							title: '图片大小不能超过2MB',							icon: 'none',							duration: 3000						});						// 删除不符合条件的图片						lists.splice(i, 1);						// 跳过当前图片，进行下一张图片的验证						continue;					}					Images.push(item)				}							Images.forEach((item) => {					if (fileList.length > Number(this.item.maxCount)) {						return uni.$u.toast('只能上传' + this.maxCount + '张')					}					this.fileList1.push({						...item,						status: 'uploading',						message: '上传中'					})				})				// this.fileList1 = Images				// let fileList2 = this.fileList1				for (let i = 0; i < Images.length; i++) {					let name = Images[i].name					let index = Images[i].name.indexOf('.')					let name1 = name.substring(0, index)					let name2 = name.substring(index, name.length)					Images[i].name = name1 + cos.uuid() + name2					let blob = await cos.objectURLToBlob(Images[i].url, Images[i].name);										const result = await cos.uploadFilePromise(blob, Images[i].name);								let item = this.fileList1[fileListLen]					fileList.splice(fileListLen, 1, Object.assign(item, {						status: result.status,						message:result.status=='failed'? '上传失败' : '',						url: 'https://' + result.url					}))					this.fileList1 = fileList					fileListLen++
				}
			}
			deletePic(event) {
				let fileList = this.fileList1
				uni.showModal({
					title: '提示',
					content: '是否要删除图片',
					success: (res) => {
						if (res.confirm) {
							fileList.splice(event.index, 1)
							this.fileList1 = fileList
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
		}
	}
</script>

<style lang="scss">
	.main {
		padding: 39rpx 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		width: 100%;

		.shop_title {
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			// margin-bottom: 24rpx;
		}

		.long_title {
			font-size: 26rpx;
			color: #9D9D9D;
			padding: 24rpx 0 40rpx;
			box-sizing: border-box;
		}

		text {
			display: block;
			line-height:40rpx;
		}

		// .upload_photo_list {


		// }
		.upload_photo_list {
			.upload_photo {
				position: relative;
				width: 202rpx;
				height: 202rpx;
				display: inline-block;
				margin-right: 24rpx;
				margin-bottom: 24rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}

				.add_photo {
					width: 100%;
					height: 100%;
				}

				.close {
					position: absolute;
					right: -9rpx;
					top: -11rpx;
					width: 50rpx;
					height: 50rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.img_relative {
				position: relative;

				text {
					position: absolute;
					left: 50%;
					bottom: 17rpx;
					transform: translateX(-50%);
					font-size: 26rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #A9A9A9;
					white-space: nowrap;
					z-index: 22;
					display: block;
				}
			}

			.fileList_warp {
				padding: 16rpx 16rpx 0;
				box-sizing: border-box;
				border: 2rpx dashed #E5E5E5;
				border-radius: 20rpx;
				position: relative;
				// .tip {
				// 	padding: 21rpx 0 25rpx;
				// 	margin: auto;

				// 	text {
				// 		font-size: 28rpx;
				// 		font-weight: 400;
				// 		color: #404040;
				// 	}
				// }
			}

			// .upload_photo {
			// 	position: relative;
			// 	width: 202rpx;
			// 	height: 202rpx;
			// 	display: inline-block;
			// 	margin-right: 24rpx;
			// 	margin-bottom: 24rpx;

			// 	&:nth-child(3n) {
			// 		margin-right: 0;
			// 	}

			// 	.add_photo {
			// 		width: 100%;
			// 		height: 100%;
			// 	}

			// 	.close {
			// 		position: absolute;
			// 		right: -9rpx;
			// 		top: -11rpx;
			// 		width: 50rpx;
			// 		height: 50rpx;

			// 		image {
			// 			width: 100%;
			// 			height: 100%;
			// 		}
			// 	}
			// }
		}

		.tip {
			width: 546rpx;
			text-align: center;
			margin: auto;
			padding: 21rpx 0 0rpx;

			text {
				font-size: 26rpx;
				font-weight: 400;
				color: #9D9D9D;

			}
		}
	}
</style>
